<template>
  <footer class="menu">
    <div class="menu-inner">
      <a
        :class="listIndex === index ? 'active' : ''"
        class="menu-item"
        v-for="(item, index) in list"
        :key="index"
        @click="insertEvent(item, index)"
      >
        <i class="ai-home tab-font">{{ item.name }}</i>
      </a>
    </div>
  </footer>
</template>

<script>
import { ref } from "vue";

export default {
  name: "footer-tabs",
  setup(props, { emit }) {
    const list = [
      { name: "趣聊", path: "/chat" },
      { name: "联系人", path: "/contacts" },
      { name: "我的", path: "/me" },
    ];
    const listIndex = ref(0);
    const insertEvent = (item, index) => {
      listIndex.value = index;
      emit("insertEvent", { ...item });
    };
    return {
      list,
      listIndex,
      insertEvent,
    };
  },
};
</script>

<style scoped lang="scss">
$--c-gray-100: #fbf8f2;
$--c-gray-200: #fcfdfe;
$--c-gray-300: #e9ebec;
$--c-gray-400: #e3e4ea;
$--c-gray-500: #5f5f5f;
$--c-gray-900: #1d1d1d;
$--c-blue-300: #a8dee2;
$--c-blue-500: #2ab3c0;
$--c-green-500: #80b895;
$--c-green-300: #bad5ca;
$--c-red-500: #ea605e;
$--c-yellow-300: #f8e0b1;
$--c-yellow-500: #f9bc73;

$--rotation: -3deg;

.menu {
  display: block;
  font: inherit;
  vertical-align: baseline;
  padding: 0.2rem 0.2rem;
  box-sizing: border-box;
  .tab-font {
    font-size: $font-size-32;
  }
  .ai-home {
    padding: 0.2rem 0.4rem;
  }
  .menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: $font-size-32;
    color: #fff;
    border-radius: 0.2rem;
    height: 0.6rem;
    text-decoration: none;
    background-color: transparent;
    border: 0.04rem solid transparent;
    &:hover,
    &:focus,
    &.active {
      border-color: $--c-gray-900;
      background-color: $--c-yellow-500;
      color: $--c-gray-900;
    }
  }
  .menu-inner {
    display: flex;
    justify-content: center;
    border-radius: 0.2rem;
    border: 0.04rem solid $--c-gray-900;
    justify-content: space-between;
    padding: 0.2rem 0.2rem;
    background-color: $--c-blue-500;
    position: relative;
    &:after {
      content: "";
      display: block;
      position: absolute;
      z-index: -1;
      width: 95%;
      height: 100%;
      bottom: -0.15rem;
      left: calc(50% - 47.5%);
      border-radius: 0.2rem;
      border: 0.04rem solid $--c-gray-900;
      background-color: $--c-gray-100;
    }
  }
}
</style>
